<template>
  <div class="rich_content indexBG" :style="autoHeight">
    <div class="label_intro">
      <div class="label_pic">
        <img :src="category.img">
      </div>
      <div class="label_info">
        <div class="label_title">#{{category.name}}#</div>
        <div class="label_cj"><span>{{category.favs}}</span>喜欢 &nbsp;&nbsp;<span>{{category.hits}}</span>查看</div>
        <div class="label_js">{{category.desc}}</div>
      </div>
    </div>
    <!--
    <div class="category" id="category">
      <span data-type="1" class="cr">最新</span>&nbsp;|&nbsp;&nbsp;<span data-type="2">人气榜</span>
    </div>
    -->

    <Card v-if="tabContents.length > 0" v-for="(item,k) in tabContents" :key="k" :content="item.desc" :item-id="item.id" :item-bg="item.xclass"></Card>
    <LoginDialog v-if="isShowLoginDialog"></LoginDialog>
    <van-share-sheet :show="showShare" :options="options" @select="shareSelect" @close="showShareSheet" />
  </div>

</template>

<script>
import PageLoading from "../../components/PageLoading";
import {showToast} from "../../utils";
import Card from "../../components/Card";
import {API} from "../../api";
import LoginDialog from "../../components/login/LoginDialog";
import {hideLoading, showLoading} from "../../api/wechat";
export default {
  data () {
    return {
      catId:0,
      category:{},
      autoHeight:"height:100%;",
      page :1,
      tabContents:[],
      pageRandom:0,
      showShare:false,
      options: [{name: '保存至相册', icon: 'poster',}, {name: '分享海报', icon: 'wechat-moments',}],
    }
  },
  components: {LoginDialog, Card, PageLoading},
  computed:{
    isShowLoginDialog:function () {
      return this.$store.state.showLoginDailog
    }
  },
  watch:{
    pageRandom:{
      handler:function(val,oldVal){
        return val;
      },
      deep:true
    }
  },
  onShow(){
    let _this = this;
    _this.page = 1;
    _this.tabContents = [];
    _this.autoHeight = "height:100%;";
    _this.catId = _this.$route.query.catId || 0 ;
    _this.updateRead();
    _this.getCategoryDetail();
  },
  mounted() {


  },
  onPullDownRefresh () {
    let _this = this;
    _this.page = 1;
    _this.tabContents = [];
    _this.getContent();

  },
  onReachBottom () {
    let _this = this;
    _this.getContent();

  },
  methods: {
    updateRead(){
      API.getAutoFields({categoryId:this.catId,type:'hits'}).then( res => {});
    },
    /*显示/隐藏 分享面板*/
    showShareSheet(params){
      this.showShare = !this.showShare;
    },
    shareSelect(o){
      console.log(o);
    },
    shareClose(){
      console.log('shareClose');
    },
    getCategoryDetail(){
      let _this = this;
      API.getCategoryDetail({catId:_this.catId}).then( res => {
        console.log(res);
        if(res.code == 200){
          _this.category = res.data;
          wx.setNavigationBarTitle({title:_this.category.name});
          _this.getContent();
        }
      });
    },
    getContent(){
        let _this = this;
        showLoading({title:"加载中"});
        API.getContent({catId:_this.catId,page:_this.page}).then( dat => {
          hideLoading();
          wx.stopPullDownRefresh();

          if(dat.data.length > 0){
            let data = dat.data;
            if(_this.tabContents == undefined){
              _this.tabContents = data;
            } else {
              _this.tabContents.push(...data);
            }
            _this.autoHeight = "height:auto;";
            _this.pageRandom =  Math.random();
            _this.page++;
          } else {
            showToast("暂无更多数据");
          }
        });
    }
  },

  created () {
  }
}
</script>

<style scoped>
  .indexBG{
    background-color: #f0f0f0;
  }
  .label_intro{position: relative;background-color: #f4f3f3;}
  .label_intro .label_pic img{width:100%;}
  .label_info{
    position: relative;
    background-color: #fff;
    width:95%;
    min-height:150px;
    margin:-40px auto 0 auto;
    border-radius: 10px;
    box-shadow: 1px 1px 10px 1px #c3c2c2;
    box-sizing: border-box;
  }
  .label_info .label_title{
    padding: 7px 10px;
    font-size: 19px;
    font-weight: 400;
  }
  .label_info .label_cj{
    margin: 0px 10px;
    color: #666;
  }
  .label_info .label_js{
    padding: 10px;
    color: #4F4F4F;
    font-size: 14px;
  }
  .category{
    width: 92%;
    margin: 0 auto;
    text-align: right;
    font-size: 15px;
    background-color: #f4f3f3;
  }
  .cr{
    color:red;
  }
  .hdsm{
    width:100%;
    height:45px;
    text-align: right;
    font-size: 15px;
    box-sizing: border-box;
    padding-right:20px;
    color:#1296db;
  }

  .hdsm a{
    color:#1296db;
  }
</style>
